CSS3

Hi Peter, Thanks for the kind words about Opera. It is a mystery why many of your sites are showing no Opera users. In general we are seeing Opera take up increase since we went free and Opera 9 came out. There is a list of sites that we 'mask' as another browser, and it may be possible some of your sites are on this list. These are sites that we get sent broken code for, so identify ourselves as another browser and completely remove 'opera' from the UA string. It may also be that there have been issues in Opera on the pages in the past, so users haven't came back. Of course, if there are any issues with Opera on your sites, I'll gladly look into them. Posted to " The rise of IE7 " by David Storey January 19th, 2007

We have some more official developer tools at our new Dev.Opera site. They're currently in Alpha, and we'll get more developer tools in the future. Yeah the internal versions don't get released to the public until the development is far enough along to release a Beta release. Our current weekly releases are for the Merlin branch (Opera 9), where things like security fixes, essential bug fixes and minor features are added. Posted to " CSS3 in future Opera builds " by David Storey January 22nd, 2007

I think one of the most interesting use cases for :not is in things like menus. If you want a separator such as a '|' between menu items then instead of using :first-child (or last-child) to remove the styling from the first (or last) item in the list, you can do something like the following: .nav ul li:not(:first-child):before { content: '|'; } This has the advantage of only doing the styling once, only on elements that need it, instead of adding the styling and removing it from those that don't, or adding class names or putting it in markup. Posted to " Thinking Dyslexic, :not()! " by David Storey February 13th, 2007

While the examples are fairly basic, they are just examples of buttons that are used on existing sites, that currently use images to get the required effect. Some advanced effects can be made if using a background image, such as adding a gradient or hi-lighting. I just need to learn Photoshop to play with this and making nice border images. Posted to " Creating buttons with CSS3 " by David Storey January 30th, 2007

While the KHTML team has done a great job, how in-depth are the tests as our target support is known to buggy in certain situations, but passed all the tests. As far as I know we haven't been testing against this test suite when adding our selector support. Now we know that we fail two of the tests of the selectors that are enabled, I'm sure we can get those bugs fixed quickly. But again, great work to the Konqueror guys for taking on these tests and adding all the selectors. I hope Opera joins them once our changes go into a released build. I also hope that if/when they move over to WebKit that these changes can be ported over as it would be a shame to lose all the hard work. Posted to " KHTML 3.5.6 is the most CSS3-compliant of all " by David Storey January 30th, 2007

Michael: That is just the margin I set so that there was a space of one line (pluss line height) below the image. Changing the bottom margin on the figure div to -35px would do the trick to remove that gap. Posted to " Styling figures with CSS3 " by David Storey July 16th, 2007

Nox/Philippe: Thanks. I've fixed both issues. The overflow was actually there as I originally styled the li elements instead of the a element, so the overflow was needed to stop the hi-light spilling out the container. When I changed the menu, I forgot to remove the overflow as it didn't make a difference in either Opera or Safari. I'm not sure which browsers are correct, but it works in all three browsers without the overflow. Posted to " A mock-up interface using CSS3 Colour " by David Storey July 30th, 2007

I could have used hr, although I read somewhere that they were being depreciated. i feel they are quite presentational as you don't always want to group by a horizontal line. There really should be a list group, similar to option groups in the option element and fieldset in forms. Ideally there should really be a menu list. HTML has the nav element, but it seems to be used instead of having a generic div element with a class of nav. I suppose multiple lists could be included inside the nav element to denote grouping. Saf2/3: Not that I know, but you can just download the latest nightly build of WebKit. It should keep Safari 2 and it will be similar enough to Safari 3. I don't see a huge difference between the two as Safari 3 wasn't released that long ago. Posted to " A mock-up interface using CSS3 Colour " by David Storey July 30th, 2007

You're right. I didn't have a widescreen to test on until I got home, so didn't notice it that pronounced. I've corrected it by adding auto after the 100% (horizontal value). When a value is set to auto it keeps the aspect ratio. It seems to be a WebKit bug that it doesn't scale smaller. The spec doesn't say anything about only making the image bigger. Mind you it doesn't say the user agent needs to make it smaller either. WebKit now has problems making an element smaller when it has resize set, so I wouldn't be surprised if the issue was something similar. Posted to " A mock-up interface using CSS3 Colour " by David Storey July 30th, 2007

FF2 doesn't show the transparency so kind of defeats the point ;) (I use regular none HSL and RGB as a fallback colour). The menu width seems to be a FF bug as it works correctly (or how I intended at least) in Opera and Safari. It did work correctly in FF bug I changed the style to fix other issues and it seems to have hit a bug. I'll see if I can make changes to fix it. The gap seems to be because of using em's and having browser differences. There is no gap in Opera or Safari. I should really have used px when needing precision. Posted to " A mock-up interface using CSS3 Colour " by David Storey July 30th, 2007

marC: It would be best to check the IE Blog to get answers for that. But I do know that Chris Wilson and the IE team are committed to improving their standards support. They are doing a good job but it will probably take a while before they can focus on CSS3, which is understandable. The rest of us have had a few years head start. Posted to " Resize now works in Gecko (kind of) " by David Storey July 27th, 2007

marC: valid as in doesn't validate? The CSS won't validate as it is using CSS3. I'm not actually sure if the validator accepts CSS3 yet, but to use CSS3 in any meaningful way, one must use vendor specific prepends (there are a lot of reasons why this is so). These obviously wont validate. I personally talk with the IE team, yes, but through my work with Opera, not in relation to this site. I've no idea when CSS3 will be ready as it is a big spec with many problems it has to solve. That is a big reason why it is modularised. Some modules (such as the colour module) are more ready than others. Posted to " Resize now works in Gecko (kind of) " by David Storey July 26th, 2007

What ever it was, it has now been disabled in the latest build that Minefield just updated itself with. i'd like to know what was causing it to work though. Posted to " Resize now works in Gecko (kind of) " by David Storey July 26th, 2007

juFo: Not as easy as you may think. I assure you. I'd assume CSS2.1 is a priority for the IE team at present, and that is only right as that is what is in most use today. Posted to " What CSS 3 Can You Easily Use Right Now? " by David Storey July 26th, 2007

I don't think we need a new spec like CSS2.2, just for browsers to agree on which features are the priority to implement and for all browsers to implement the same features as their schedule allows (instead of the current situation where Opera implemented Media Queries, Mozilla implemented border-radius, Safari did text-shadow etc). To do this we need to know from developers what the most important features are. I've had some feedback on this. We also need those parts of the specs to be firmed up so there won't be a case where each browser implements it differently as the spec wasn't mature enough. You could give it a name like CSS3.1 or CSS3 basic profile or such, or just create an interim module with all the properties that are ready to be implemented and are desired by developers. There doesn't really have to be anything formal from the W3C except the commitment to work on the few things that are desired but the spec isn't quite ready for implementation sans the browser prepends. Posted to " What CSS 3 Can You Easily Use Right Now? " by David Storey July 25th, 2007

Hi David. Thanks for dropping by. You know more than me as you work for Mozilla, but I assure you it does work in Minefield, at least with the recent builds I've tried. I was very surprised myself when it started working. The screenshot above shows that. Could it be something in relation to one of the other features used, such as content editable? It was only since the date of this post that it started working for me. Posted to " Resize now works in Gecko (kind of) " by David Storey July 24th, 2007

It's still working for me on 2007071904. I've just downloaded it to make sure, as I was still running 2007070804. I think it may not have worked at home, so for those that can't see it, i've made a snazzy screenshot. BTW, the border-radius is removed when the resize/move handles are shown. Without the handles they display just fine. Posted to " Resize now works in Gecko (kind of) " by David Storey July 24th, 2007

The real figures are not as high as 84% for Safari and as low as 1% for Opera. Opera actually has more hits than Safari the last time I checked. There must have been some issue the day that Joost checked it (or perhaps the figures for that day?) It would make sense for Safari to be high on this site as it is required to see a number of the previews and demos. I personally use Safari quite a bit on this site. Posted to " Browser shares? 84% Safari! " by David Storey July 24th, 2007

John: Well, we have a department (or in truth a sub department) called Open the Web, which contains Web Openers. I'm the team leader, and as such the Chief Web Opener. Opera has a problem where a number of sites do not work in our browser, not because Opera isn't standards complient or has a bug, but because a site sends Opera broken content in some way. This could be that it sniffs the user agent and gives us broken code or blocks us entirely (just try going to docs.google.com ;)) or that the developer has only tested in IE or Firefox and accidentally takes advantage of a bug or vendor specific extension of those browsers. It is quite common thinking that if you test in Firefox it means your code will work in standards based browsers and is standards compliant. This is not always the case however as all browsers have bugs. So it is my team's task to open the web by getting these sites to both work in our browser and other standards based browsers. Fixing an issue that breaks Opera can often fix it for Firefox and Safari. We make sure that any suggest fixes we give to sites also work in the major browsers. Posted to " Styling figures with CSS3 " by David Storey July 9th, 2007

I think it is ironic that CSS is tired of being sexy ;) They are a cool band though. Posted to " Interview with Håkon Wium Lie [Part Two] " by David Storey September 6th, 2007

The issues here are two fold. We don't want another platform/browser war, where each browser is implementing its own features for their perceived need. If WebKit think these are needed then they should work to get them standardised ASAP. We don't want a case where a site will only work as intended in Safari as it uses these features. It is easy to see this could be the case on mobile sites, where it is the latest fad to just develop for one device/browser. Also how and where does this overlap with SVG. It is probably possible to do much of this using animated SVG images uses as a background-image in CSS. It could also be done with a compound document, but this isn't ideal for backwards compatibility reasons. It could become the case where properties like these are used, with SVG as the glue in the background that implements the property. There is certainly overlap here. If we are going to do stuff thatt overlap with SVG, we probably want to look into making the property/value names similar so that we can transfer knowledge across domains. Posted to " Webkit introduce more new features " by David Storey November 1st, 2007

Peter: In terms of influence on the industry no, but in real terms we are are small company. Certainly when you consider our rivals; Apple, Microsoft and Google. We are growing fast though. Posted to " Bert Bos on CSS3 " by David Storey November 1st, 2007

As far as I can see the snapshots are of complete modules. While this is useful, I think it would be nicer to hi-ligt the features from none complete modules that are stable, as browser vendors do not need to implement a full module at a time. There are specifically some things from backgrounds and borders that it would be nice to know are stable enough to implement. Posted to " Latest updates to CSS 3 modules " by David Storey October 1st, 2007

I think iPhone apps (which is very bad practice to design for one device/browser) often use a separate url or browser sniffing instead of media queries. At this stage it is a better option as Apple's use of media queries for iPhone is very broken. As they don't support handheld, they use the screen media type, and require the regular screen stylesheet to also use a media query to stop the iPhone getting both stylesheets. Problem is IE (desktop) doesn't understand this and gets no styles at all. Safari 2 and 1 also don't even understand it and get no styles. There are probably other browsers too. If they just supported handheld life would be so much easier. 'm hoping to discuss this with them though. Posted to " CSS Snapshot 2007 released as a working draft " by David Storey October 22nd, 2007

currentColor is one of the things that the site doesn't cover that Opera supports, an SVG colour keywords (but they work almost everywhere). I just have to find time to write about them and find an interesting demo for them. Posted to " Request: test cases! " by David Storey October 22nd, 2007

Opera Kestrel won't be coming out in the next few weeks, but the public beta will be. Everything here certainly won't be ready for the beta, and probably not for final, but we can look into it and see what is needed to be done. I'll follow up with a implementation report in the near future. I'm a little surprised there is no Media Query properties ready for the snapshot, as both WebKit and ourselves, both on desktop and mobile (and TV in our case) support parts of this module. I guess this is due to not wanting to put partial parts of a module in this snapshot. I'd like to see another snapshot draft in around six months that includes full or partial modules that have progressed since the time this snapshot was published. I'm sure that by that stage at least some of backgrounds and borders, media queries and multi column layout can be included. We know that Backgrounds and Borders module contains the most requested features, but it isn't stable enough at present and implementations (Gecko and WebKit) both differ. Posted to " CSS Snapshot 2007 released as a working draft " by David Storey October 22nd, 2007

Eric: I think that is probably because SVG colours are just the name the W3C come up with as that was the first spec to formalise the names in a Spec. Netscape supported the colours a long time ago, without supporting SVG. We used to have the same issue with currentColor not being supported in CSS as it was originally just part of the SVG spec and not required in CSS until the cSS3 colour module. If I remember correctly you guys took your SVG support from KSVG, so I guess it takes time to sync it up with the rest of the engine. It shouldn't be too much work to get currentColor to work in CSS though. Any plans to support SVG in CSS background-image? There are some great use cases for it, but only Opera currently supports it, which limits its use as a real world technique. Adding gradients and things like bullet icons are a great use for it, especially when scaling is needed with adaptive zoom and such. Posted to " Request: test cases! " by David Storey October 23rd, 2007

Eric: I have a article here http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/ including SVG as a background image (gradient) here - http://files.myopera.com/dstorey/experiments/iTunesTable.html (may have to press enter again in the url field due to hotlinking problems) Rounded corners as background image - http://files.myopera.com/dstorey/experiments/roundedcorners.html I don't have any example using the list markers, but it should work the same. Let me know if you have any questions. Posted to " Request: test cases! " by David Storey October 23rd, 2007

It was a great interview, but the quote The smaller browsers can sometimes do small improvements, but mostly they wait for the big ones to take the hit and educate the users. was a bit unfair. Opera generally do it the other way around, and we are often too strict to the standard, so have to evangelise about why things break, when they work in other browsers. We don't wait for them to take the it and follow them. Web Forms 2 is an example of a technology we added first, that is designed to be backwards compatible, but in practice isn't 100% that way du to sites using custom attributes for validation and such. We took the hit and reached out to sites that broke due to this. There are quite a lot of other examples too. Capturing events in addEventListener is another example. Posted to " Bert Bos on CSS3 " by David Storey October 24th, 2007

Acid 2 was so yesterday :) Yeah, the off by 1px s a big problem for us (Opera) as Safari implemented it first so most sites obviously tested in Safari. That makes many of the text with text-shadow look plain ugly (like double text). This site used to have it on the menu items for example. Opera has had multiple text shadows from the start (and I'd assume box shadpws when that comes), but I never thought of a good use case for it. I was thinking more along the lines of shadows going in different directions. The demo looks cool though. You can probably do some cool affects that make t text look like it glows, like when blue light is behind in on shop fronts and such. Posted to " New text-shadow demo " by David Storey October 12th, 2007

Just press enter/return in the url field and it will load. It is the hotllinking restrictions on MyOpera that is stopping me from linking to something in the files domain. Posted to " Generated content in CSS3 " by David Storey December 13th, 2007

Just a quick follow up from opera's point of view. 5) I'm not sure how difficult Grid would be to implement, but the spec isn't close enough to be ready to be implemented yet. It is certainly a module Opera is interested in though. Selectors are already implemented in Opera (sans ::selection), so you can give the more interesting ones a whirl. As the spec is more or less complete, I wouldn't be surprised for other browsers such as Firefox 4 and Safari 4 (or point releases) to follow suit 7) The & stuff could be solved if there was a nth-word selector or you could select by word like you can by attribute. That's not in CSS3 Selectors but may be possible for CSS4 selectors? It's something I mentioned on my blog, but I'm not sure if the W3C has discussed this, or how difficult it would be. 10) If we could access SVG through CSS instead of just through XHTML or stand aloe files that may be easier. You can of course by making the SVG a background image, but that wont help when you want to rotate the html that the css selector is pointing to. Then of course there is the problem of learning SVG to do them things. Learning how to use SVG to do a gradient and include it as a background image is about 20 mins work, but doing more complex stuff is harder. I'd be interested to see some binding between CSS and SVG that is transparent to the designer, so it is specified in CSS syntax and that is translated to SVg in the background. You couldn't do that for all of SVG as there is too much, and a lot of duplication, but for common things it would be nice, and allow the author to drop into SVG for more complex stuff. The link between SVG and HTML would also have to be easier too, such as be able to access HTML in an external document (the html file) from within the SVG file. Maybe you can do that already, but I'm not sure how yet (scripting perhaps, but that makes it more complex). I'd love to be able to use a selector is SVG to select a img in the html file, and then do the transform on the element 11) text-shadow is also supported by Opera (including multiple shadows), so there is only Firefox and IE to go. Safari doesn't support multiple shadows yet, but they are not needed that often. Posted to " An interview with Jina Bolton " by David Storey November 29th, 2007

I'll change it. Thanks for the input Posted to " Generated content in CSS3 " by David Storey December 15th, 2007

My thoughts (even though I work for a browser vendor) would be to follow the border of the box if it is opaque (ignoring border-image for now), so that it follows around the curve of the border-radius if that is set. If there is a border-image, then follow where the none transparent parts of the image go, so for example here you would get the shadow of the diamonds. So far this is easy and logical as it is dealing with opaque and transparent (although I don't implement the browser, so I can't comment if it is as easy as it sounds). Now the difficult part - semi-transparent images or backgrounds with HSLA or RGBA or opacity. My thought here, is what happens in nature? If you have a semi transparent surface, such as coloured perspex or glass, what happens when you shine a light source on it? I'd expect the shadow to change depending on how transparent the image/background is. Where the image is full transparent you'd get the regular shadow, and where is has some opacity you may get some shadow through the image/colour. I'm not a physics expert, so I'm not 100% sure what would actually happen. Posted to " CSS Drop Shadows " by David Storey December 17th, 2007

Ben: It would be interesting to see with an image where it doesn't go more transparent in a linear fashion. For example, a stained glass window, with a diamond pattern for example, where some bits are more opaque as they have thicker paint, some or more transparent (almost clear but not quite) and some is fully opaque (such as the leading). Even without the fully opaque leading i'd expect to see some shadow at the edges (and under?) of the more opaque colours/pattern that shows through the almost transparent colour/pattern. Posted to " CSS Drop Shadows " by David Storey December 17th, 2007

Bryan: the opacity can already be set by using either the RGBA or HSLA colour model. I'd think that the way of specifying the shadow should be the same as text-shadow, as it is already implemented by a number of browsers now, and shouldn't be inconsistent with that. It probably wouldn't be wise to change text-shadow too much as we'd lose the work done by the browser vendors and have versions of browsers that are incompatible. Posted to " CSS Drop Shadows " by David Storey December 18th, 2007

Robin: As far as I understand it only updates to a later browser of that major version (unless they've changed this). If this is the case then users wont automatically get FF3 if they have FF2. I could be wrong though. Posted to " Progress on CSS3 marches on " by David Storey January 8th, 2008

Opera's engine is called Presto. The latest branch (included in 9.5/Kestrel and an early version in 9.0/Merlin) is Core-2. I'm excited to see what Core-2 will contain, in regards to CSS3 when it is eventaully released in Kestrel. We have Web Fonts internally, but not in a desktop platform build, so I can't promise it will be in Kestrel yet. Posted to " 2008: the year of the layout engine " by David Storey January 2nd, 2008

Opera already supported @font-face a while ago (probably before Safari), but it is currently only publicly in our ACID3 build. Expect it in (Presto) Core-2.2. As far as I understand it, the site in this post falls fowl of the licence agreement of the font:

Using this font for a @font-face decleration is allowed, but only if a readable link to my homepage is put on every page where this font is used.

There is a link in the source, but not actually on the page itself. Unless this is only for other fonts on exljbris and not Fertigo Pro. Posted to " @font-face in the wild " by David Storey August 14th, 2008

Emo: That looks great. Can you do any examples using a basic object that has varying opacity, such as where part of the patter is more opaque than the rest? Posted to " CSS Drop Shadows " by David Storey December 18th, 2007

Stifu: There are also a lot more CSS3 in Opera that isn't on this site yet, and I've not had time to make demos of. content on every element (not just before and after), The nav-* properties on Nintendo Internet Channel (I believe), much more relating to Media Queries than is shown here, Voice, Print media, etc. Posted to " 2008: the year of the layout engine " by David Storey January 4th, 2008

The Video and Audio stuff used in Opera's examples wont work, as Opera supports Ogg Theora (just like Firefox). As you can imagine, Apple owns proprietary video format wrappers like Quicktime .mov. It seems they'd prefer to push those rather than a open format like ogg. You can see this on iPhone, where Quicktime is pushed for video instead of Flash (which is also proprietary, but at least works on more platforms than Quicktime does). Ogg will work in Safari if you install the codec in Quicktime, but you can't rely on users to do that. Posted to " Safari 3.1 pushes CSS3 support forward " by David Storey March 19th, 2008

Well actually I was using a PPC Mac Posted to " HSL support in Core-2 " by David Storey November 20th, 2007

I've added the compatibility table. If anything is incorrect give me a shout. Posted to " HSL support in Core-2 " by David Storey November 20th, 2007

Stifu: I guess most useful depends on the design, context and and the developer. I find the nth-* selectors very useful, yet can't really be used as only Opera and Konqueror support them. They are every bit as useful as border radius, and without them extra markup (class names) or script is often needed. It is also harder to gracefully degrade without support in many sitations, while lacking border-radius or such just means it doesn't look quite so pretty. As mentioned above, you can often get a similar effect in Opera using SVG, which isn't as ideal as using the same CSS as other browsers, but gets the same result without extra markup. There are some restrictions though, which could probably be worked around by someone better at SVG than me. It may be that things like border-radius can be implemented using the existing code used by SVG, but I don't program the browser, so I'm not sure if that is the case or not. I find content very useful too, especially when styling buttons, and wanting to replace the existing text with something else or a icon. I don't want to knock FF as it is a good browser, with nice standards support, but I too think it is behind in CSS3, especially when it was probably in a leading position before FF3. The advancments in WebKit and Opera from previous version to the next version (already released in WebKit's case) seem to be much bigger than what currently stands from FF2 to FF3. I did a quick test a while ago, and I may have missed a few properties that I didn't realise were supported in each browser, but Opera had the most, followed by Safari, then Firefox. I don't claim that was a 100% accurate study though. In most cases it is irrelevent anyway, as until IE catch up, CSS3 can only be used on personal sites and such, and not real world sites with clients. The exception is those that just add a bit more eye candy, but I'd suspect many clients would still complain that it looked better in none IE browsers, and they'd want it to look the same. Having said all that, I'm aware that there are things that FF and Safari support that we don't, and we will look into them. There can be no promises that they will be added before Opera 9.5 ships however. We also want to make sure we implement the correct spec, instead of wasting time developing things that may change radically before the spec is finallised. RGBA and HSLA (we recently added HSL) are two things (for want of a better word) that are stable, so should be safe to implement. border-radius si something that is more unstable (as Peter mentioned) and would be nice to implement when we have further clarification on the spec. I think that is close to being resolved however. I'm quitely confident we will improve further before shipping, but that depends on many factors, such as shipping date, resources etc. Posted to " 2008: the year of the layout engine " by David Storey January 4th, 2008

Matt: It should have said Molly or Zeldman, but I accidentally missed the closing >. I used a rather loose definition of Designer, because even if you don't consider her a designer, she is in the right position to be able to pin point the right people as you say, and knows the issues designers face as well as most people. Posted to " Slightly broken, but not beyond repair " by David Storey December 21st, 2007

yes, you need the weekly release. There are more fixes forthcoming though. Weekly here - http://my.opera.com/desktopteam/blog/ Posted to " HSL support in Core-2 " by David Storey November 22nd, 2007

It would probably be best if these suggestions were on the WaSP site, to keep the comments in one place. color: transparent; already exists in CSS3. See http://www.w3.org/Style/CSS/Test/CSS3/Color/20070927/xhtml1/t040203-transparent-1-a.xht. You can also use content: ""; to clear the content, but that wont set it to the same size as it was, as far as I know. You can use the content trick above to make your link display correctly, or use line height to hide the text off screen. Posted to " Let the CSS WG know what you need from CSS3 " by David Storey January 21st, 2008

transparent works for Opera, but not in color yet, as this wasn't an allowed value in CSS2.1. It is most likely just a matter of linking the current code to be enabled for that property. Posted to " Let the CSS WG know what you need from CSS3 " by David Storey January 21st, 2008

I don't think I can agree with John here. Also note that Mozilla (who John works for) hasn't implemented all of the selectors, unlike Opera, Safari and Konqueror. I don't see an emediate use for many of the selectors, but the nth-child, nth-of-type etc are very useful and cut down on the use of javascript, or classes quite a bit. There are quite a few examples on this site that use the new selectors. Posted to " Just how useful are CSS3 selectors? " by David Storey February 21st, 2008

:contains doesn't suppose to work. It has been removed from the spec, so is irrelevant. ::selection is the property that has been added in Opera 9.5 and the dynamic behaviour of the other selectors. Posted to " Fully selected " by David Storey February 6th, 2008

John, What you say makes sense. Even though there seems to be a good amound of interest in Grid layout, it can't be used in a meaningful way until at least the OS release from Microsoft after their release of IE that supports it (or most likely the OS it comes with). And only when that OS becomes popular. In Grid layout's favour is that the spec is written by two MS employees. At least Markus is on the IE team, and probably Alex too. I would guess that if they wrote the module it will give them more motivation to implement it. For some of CSS3 it depends on how it is used. Many of the new selectors (some of which are fairly widely supported) will be difficult to use due to backwards compatibility reasons, but can be used in a backwards compatibile way. I've used p:first-of-type::first-letter to add drops caps for example, or tr:nth-child(odd) for tiger stripes on tables to aid they eye when looking at tables. A lot of the stuff that in the majority of cases is backwards compatible are included in the Backgrounds and borders module. Some still depends on how you use it of course, like multiple background images. A lot of this stuff are what I'd like Opera to implement, and the spec is now reaching a stage where this becomes more feasible. Then it is more a case of release schedules etc (which are things I'm sure you know about during your experiences with Style Master). I'd also agree with you that a majority of sites still use table based layout, including some companies that should know better. Opera is fortunate that are users upgrade quickly. I'd guess it would also be the same for Mozilla, but that will slow down as they move more mainstream. Microsoft doesn't have that luxuary as many of their users don't even know what a browser is (they surf Google with the Blue E), never mind that it needs updating. I think I disagree with you on Safari though. Opera probably has more draft CSS3 features, but the Safari only features worry me. If It was IE and MS people would be up in arms. I'm not following the internal communication of the working group, so if they propose the features then implement them to show how it could be done then that is a little different. But many people will remmember things like IE only CSS filters. These were impossible to implement by other browsers as they tapped into Direct-X. Then there is the whole Active X issue. The animations in Safari probably hook straight into core Animation, which is only available on OS X, and certainly not phone like the RAZR or other such devices. It probably only takes them a few lines of code. For other browsers this would be none trivial. Opera of course has animation in SVG. It would make more sense (to me at least) to make sure any animation in CSS was compatible with that in SVG, so authors can transfer knowledge and implementers don't have to implement the code from scratch twice, for two different technologies, to get the same end effect. I don't think any other browser than Opera has SVG animations though. Lets also not forget that vendor only solutions cause compatibility issues. We get all sorts of problems because sites use CSS Filters (not standards aware developers in the most part, but many real world sites still use them), or Mozilla extensions to the DOM. Safari can't really cause problems like this because it doesn't have enough market share - or so you'd think. It is though, as rightly or wrongly, many developers think the only phone that can surf the web is iPhone (wel Steve more or less said so in his keynote ;)). Thus mobile sites are using the -webkit- prepend without the none prepend version. This in itself is unfortunate, but when they use the properties Safari invented that have no standards fallback to even use, then we (Opera) can do nothing about it. We can't even really implement the Safari only property, until it has been put in a spec. There is more than enough real CSS3 to implement, that at least tell us how it works and will be test suites. Reverse engineering is expensive. It is a dangerous game people are playing when they wish for more vendor only innovation in the rendering engine field. Opera actually invents a lot of things ourself, but that goes more unnoticed as we push to standardise them quickly. I believe for example that Sever-sent events and Web Forms 2 from HTML5 were Opera inventions, and possibly cleint side storage (but I'm not sure about that one. Widgets 1.0 was certainly a Opera technology we worked to standardise from the start. I think this is the approach that should be taken (even if you get less credit for it). If Apple are taking this approach then the issues I outlined become less of an issue, and we just need to get developers to five up the blind Apple faith and include the none prepended versions of properties instead of just the -webkit- one. The current iPhone only web development practice is a sad chapter in the web standards movement, that is hopefully dying out. Luckly people like Roger Johansson and Eric Meyer have spoken out against it. I wish ther was more work in WaSP on this, but then again there are a lot of Apple fans in WaSP ;) Anyway, sorry for the rant. Working on site compatibility day in, day out, some of this stuff is starting to fustrate me. Posted to " Progress on CSS3 marches on " by David Storey January 8th, 2008

the single : notation has always worked in Opera. I'm almost sure that notation also works in other browsers for psuedo elements that should have the double :: notation too. Posted to " Fully selected " by David Storey February 8th, 2008

The main question is if WebKit and KHTML pass all the selectors bug cases here. Konqueror was the first browser to pass the Selectors test here, but when Opera passed it we still had many open selectors bugs in our bug tracking system, and one unsupported selector - ::selection. Opera has fixed these bugs and supports selection, and passes all the tests on Quirksmode. I believe Opera is the first browser to implement all selectors correctly, including updating the selection on the fly when elements are added via the DOM. It may be that Konq also handles everything correctly as I can't test, and Quirksmode only shows the results from officially released browser versions. It is cool that WebKit has added the nth-* selectors as I use them quite a lot in demos as they are very useful. Posted to " Webkit passes the CSS Selector Test " by David Storey February 11th, 2008

There is a feed linked from the home page (both RSS 2.0 and Atom). It shows up for me in url field in Opera and Safari at least. Posted to " Styling Forms with CSS3 " by David Storey December 13th, 2007

I'll follow up with the DevO developers to see if they can add your request. Posted to " Styling Forms with CSS3 " by David Storey December 13th, 2007

Marcus: That is because Firefox doesn't support content in CSS3. It only supports it in CSS2.1 (i.e. on :before and :after). Posted to " Let the CSS WG know what you need from CSS3 " by David Storey January 22nd, 2008

David: The cross browser David support seems pretty good. Only IE is missing. Posted to " CSS 2007 snapshot, CSS3, and Acid 3 " by David Storey March 30th, 2008

wolfman: it works fine for me, and I know the bugs were fixed that enabled both features I described. Posted to " Fully selected " by David Storey February 5th, 2008

Thanks Tim. We were talking to the other Tim and we were on the verse of 99% at that stage. Great to see us reach 100% while I was at lunch. Joost/Ed: It is unfair to demand such a build instantly. We have basically just checked in these changes, and there is no way a public build can be made that fast. This site is about future technology, and we've just added a couple of CSS3 properties, so I thought it would be best to announce it as soon as we have it. This is post Kestrel work, as we are deep into our development testing. These kind of changes require a lot of work that could cause regressions that will take many QA hours to ensure they are up to release quality. Safari were very fast recently at adding Acid3 as they have already released their major release and don't have to focus on the stability as much at this stage, like Mozilla and ourselves do. The build with these improvements will be released as soon as possible however. Some fixes may be included in Kestrel but it depends how risky the changes are. HSLA and RGBA are quite a big change for example as colour has to be represented with the alpha channel internally instead of just RG and B channels. This changes code in a lot of modules. Posted to " Opera overtakes Safari in Acid3 race, reaches 100% " by David Storey March 26th, 2008

Ed: We have to pass it first in a development build before it gets included in a public release :) This is just stage one of getting what you wish for. Stifu: I'm not sure I like your allegations. When and where did Opera try their best to make it look like we passed the test first. In every post I know from an Opera employee, we've made it clear that we were the first to reach 100% but haven't passed the test. There is no debating that. I'm sorry if people can't read correctly. Posted to " Opera overtakes Safari in Acid3 race, reaches 100% " by David Storey March 27th, 2008

Iron_Storm: Opera hasn't won yet. We are at the same position as WebKit: We need to make the animations smooth. It can be argued that is very subjective as it depends on the speed of the hardware and network speed for instance. Maciej: That is true. I probably sounded a bit too negative about WebKit there (I updated when it was late and tired). It is probably more the fault of the test that it doesn't need very much support for what it is testing to pass. I still congratulate WebKit for all the work it has done, and making this race fun. I'm enjoying how this battle is pushing us both to improve our standards support faster. Maybe we should do this more often ;) Posted to " Opera overtakes Safari in Acid3 race, reaches 100% " by David Storey March 28th, 2008

David: Yes, I already included that on our CSS3 Colour module compatibility table, but I was focusing on the Acid 3 passing browser in that paragraph. I was also going to add Firefox support, but forgot too add that note. I'll update the post soon. I didn't know about Gecko and cursor (or WebKit previous to their ACID 3 work). That is good to know. I'll add it to the post and look at creating a CSS3 UI compatibility table soon. Posted to " CSS 2007 snapshot, CSS3, and Acid 3 " by David Storey March 29th, 2008

Serious David: I was quite disappointed by that myself, but I fully expect they won't release a official version of Safari with support at that level. They will most likely either haveto release without passing Acid3 or fix up their work in progress on SMIL. I suspect it will be the later ,but can't talk for WebKit. Posted to " Opera overtakes Safari in Acid3 race, reaches 100% " by David Storey March 31st, 2008

 Neal: It was too early to implement Background and Borders in Opera Presto 2.2. Which proved to be the correct decision as the spec has changed and things like spread and inset have been added to the box-shaodw and Safari and Ff differ in their border-radius support. Safari doesn't support different radius on the short hand as the spec didn't have the / notation then. We have implemented it when it looks stable (though new properties have appeared for border-image) so our support is up to date and to spec in Presto 2.3. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 1st, 2009

@philippe: Thanks for that. I wasn't aware of the "may" statement in the CSS 2.1 spec. That is interesting, but it is a bit of a pain as it is a "may" so browsers can do something different, which causes incompatibilities like this one. I think the FF solution is probably better than Opera/Safari if all browsers did the same. I'll see if it is something we (Opera) can add. The drop cap doesn't work for me on Safari/Mac. If I have the font installed on my local machine it works as expected. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 2nd, 2009

 @Jakub: The next significant Opera version will have Opera Presto 2.4. 10.10 will be more or less Opera 10 plus Opera Unite. Hopefully it will not be too long before we start having public alphas of Opera with Presto 2.4, but we can't commit to a date yet. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 2nd, 2009

 @Michael: Just border-radius. We consider it stable now, especially considering it has now defined / notation to have different x and y radius in the short hand. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 5th, 2009

 @Nick: Yes it is. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 5th, 2009

 Hi Shelly, It is a known issue that font descriptors are not supported in @font-face At-rule blocks. There was unfortunately not enough time to fix this due to regressions that the fix caused. It will be added in an automatic update in the very near future. There is a work around where you can name the font-family as a different name, but I'm not sure how worthwhile this is as the issue will hopefully fixed quickly and our users upgraded. Web Fonts lack a test suite so I've found them very buggy across browsers (such as Web Fonts not working with ::first-letter pseudo class in Safari) when writing a number of test cases. Fortunately Opera fixed almost all the ones we uncovered, except the aforementioned one. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 1st, 2009

 Nick: I’m not sure that is decided yet, but Vega is closer to public consumption (it is already in a shipping product - the Devices SDK) than Carakan. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 11th, 2009

@aditrif: It was included in Opera Devices SDK 10 for example as it was the latest Core version in release quality during its development. By the time the next Opera desktop version comes out with an engine upgrade, Presto 2.4 will be finalised and fully release quality. Posted to " Opera 10 unleashed, brings Web Fonts and transparency to the table " by David Storey September 10th, 2009

Hi Elika, That’s a huge shame. It would be great to have you there, with you being one of the key people in the Working Group. The event all come together very recently, so we announced it as soon as we could. I guess there is no way to change the time of your flight? Posted to " Standards.Next CSS3 in New York City " by David Storey November 12th, 2009